<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="product" value="${requestScope.product}"/>
<div class="center_content">
	<div class="center_title_bar">${product.productname }</div>
     <div class="prod_box_big">
       <div class="center_prod_box_big">
         <div class="product_img_big"><img class="big_image_detail" src="${product.image1 }" alt="" border="0" />
         </div>
         <div class="details_big_box">
           <div class="product_title_big">${product.productname }</div>
           <div class="specifications"> 
       		 Model: <span class="blue">${product.model }</span><br />
             Warranties: <span class="blue">${product.warranty } Month</span><br />
             Description :<span class="blue"> ${product.description }</span><br />
             <span class="blue">
				<c:forEach var="j" begin="1" end="5" >   
					<input type="radio" name="rating_product" value="${j }" class="star" disabled="disabled"
						<c:if test="${product.rating == j  }">
							checked ="checked"
						</c:if>
					>
				</c:forEach>
			</span><br />
           </div>
           <div class="prod_price_big"><span class="price">${product.price }$</span></div>
           <a href="Cart.do?productid=${product.productid }" class="prod_buy">Add to Cart</a> <a href="WishList.do?productid=${product.productid }" class="prod_wishlist">Add to Wish Lists</a> </div>
       </div>
     </div>
	<div class="tabber" id="tab1">
	  <div class="tabbertab">
	    <h2><a name="tab1">Overview</a></h2>
	    <div class="product_image_gallery">
			<img style="width:250px; height:250px; float: left;" id="target" src="" />
			<ul id="thumbs">
				<li class="img_slide" style="float: left;"><a href="${product.image1 }"><img style="width:80px; height:80px;" src="${product.image1 }"/></a></li>
				<li class="img_slide" style="float: left;"><a href="${product.image2 }"><img style="width:80px; height:80px;" src="${product.image2 }"/></a></li>
			</ul>
		</div>  
		<div class="specificationsoverview"> 
       		 Model: <span class="blue">${product.model }</span><br />
             Warranties: <span class="blue">${product.warranty } Month</span><br />
             Description :<span class="blue">${product.description }</span><br />
         </div>
         <div class="title_block">Features</div>
			<div class="line_block"></div>	
			<div class="block_inside">
				<c:forEach var="i" begin="0" end="${requestScope.namefeatures.size()-1}" >                
					<div class="commenttitle">${requestScope.namefeatures[i]}</div>                       
		            <p>${requestScope.detailsfeatures[i]}</p>
		            <div class="line_block"></div>
	            </c:forEach>
	       </div>
	  </div>
	
	  <div class="tabbertab">
	    <h2>Specifications</h2>
			<table width="100%"  border="1" cellspacing="0" cellpadding="5">
					<tr align="center" class="firstrowtable">
						<th scope="col" class="spec-label-col">Specs:</th>
						<th scope="col" class="spec-value-col">Details:</th>
						<th scope="col">Description:</th>
					</tr>
					<c:forEach var = "i"  begin="0" end ="${requestScope.name.size()-1}"> 
					<tr>
						<th scope="col">${requestScope.name[i]}</th>
						<th scope="col">${requestScope.details[i]}</th>
					</tr>
					</c:forEach>
			</table>
		</div>

		<div class="tabbertab">
			<c:set var="listcomment" value="${requestScope.listcomment}"/>
			<h2>Ratings and reviews</h2>
			<div class="title_block">Comment</div>
			<div class="line_block"></div>	
			<div class="block_inside">
			<c:if test="${listcomment.size() >0 }">
				<c:forEach var="i" begin="0" end="${listcomment.size()-1 }" >                
					<div class="commenttitle">${listcomment[i].title }</div>
					<c:if test="${listcomment[i].rating >0  }">
						<div class="rating_are_comment">
							<c:forEach var="j" begin="1" end="5" >   
								<input type="radio" name="rating${i }" value="${j }" class="star" disabled="disabled"
									<c:if test="${listcomment[i].rating == j  }">
										checked ="checked"
									</c:if>
								>
							</c:forEach>
						</div>   
					</c:if>  
		            <small>on <a href="">${listcomment[i].datetime }</a> by <a href="">${listcomment[i].user.firstname }</a> </small>                        
		            <p>${listcomment[i].content }</p>
		            <div class="separator"></div>
	            </c:forEach>
	         </c:if>
	            <div class="commenttitle">Write a review</div>
                <form id="comment-form" method="post" action="CommentProduct.do">                    
                    <fieldset>
                    	<div class="rating_are_comment">
                    	<div class="text-form">Rating:</div>
                    	<c:forEach var="j" begin="1" end="5" >  
                    		<input type="radio" name="rating" value="${j }" class="star"> 
                    	</c:forEach>
			            </div>
                          <label><span class="text-form">Title:</span><input name="title" type="text" /></label>                                    
                          <div class="wrapper"><div class="text-form">Message:</div><textarea name='content'></textarea></div>
                          <div class="buttons">
                              <input id="button" type="submit" value="Send" name="Send">
                          </div>       
                          <input name="productid" type="hidden" value="${product.productid }" />                      
                    </fieldset>						
                </form>
            </div>
		</div>
		<div class="tabbertab">
			<h2>Accessories</h2>
			<div class="title_block">Additional Accessories</div>
			<div class="line_block"></div>	
			<c:forEach var="praccessories" items="${requestScope.listproductaccessories }">
				<c:if test="${product.productid != praccessories.productid  }">
				  <div class="prod_box">
				    <div class="center_prod_box">
				      <div class="product_title"><a href="ProductDetail.do?productid=${praccessories.productid }">${praccessories.productname }</a></div>
				      <div class="product_img"><a href="ProductDetail.do?productid=${praccessories.productid }"><img class="image_product" src="${praccessories.image1 }" alt="" border="0" /></a></div>
				      <div class="prod_price"><span class="price">${praccessories.price}$</span></div>
				      <div class="rating_area">
							<c:forEach var="j" begin="1" end="5" >   
								<input type="radio" name="rating_product${praccessories.productid }" value="${j }" class="star" disabled="disabled"
									<c:if test="${praccessories.rating == j  }">
										checked ="checked"
									</c:if>
								>
							</c:forEach>
				      </div>
				    </div>
				    <div class="prod_details_tab"> <a href="Cart.do?productid=${praccessories.productid }" class="prod_buy">Add to Cart</a> <a href="ProductDetail.do?productid=${praccessories.productid }" class="prod_details">Details</a> </div>
				  </div>
				</c:if>
		  </c:forEach>
		</div>
	</div>
</div>